<template>
  <div class="show-wrapper" :style="layoutStyleInfo">
    <ExhibitionFrame
      v-for="(component, key) in layoutDesign"
      :componentParams="component.formComponents"
      :componentName="key"
      :key="key"
    >
      <component
        :componentParams="component.formComponents"
        :is="component.viewComponentName"
      ></component>
    </ExhibitionFrame>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import { calculateStyle } from "@/util/style";
import ViewComponents from "@/components/viewIndex";
import ExhibitionFrame from "@/components/outFrame/ExhibitionFrame.vue";
import { $http } from "@/util/ajax";
export default defineComponent({
  components: { ...ViewComponents, ExhibitionFrame },
  setup() {
    let layoutDesign = ref({});
    let layoutStyle = ref({});
    onMounted(() => {
      const route = useRoute();
      const id = route.params.id;

      $http.get(`/layout/show?id=${id}`).then((res) => {
        let layoutInfo = JSON.parse(res.data.layoutDesign);
        let { layout, ...otherComponents } = layoutInfo;
        layoutStyle.value = layout;
        layoutDesign.value = otherComponents;
      });
    });

    // 布局样式设置
    const layoutStyleInfo = computed(() => {
      let { formComponents } = layoutStyle.value as any;
      const sizeStyle = calculateStyle(formComponents?.SizeForm?.property);
      const backgroundStyle = calculateStyle(formComponents?.BackgroundForm?.property);
      return { ...sizeStyle, ...backgroundStyle };
    });

    return {
      layoutDesign,
      layoutStyleInfo,
    };
  },
});
</script>

<style lang="scss" scoped></style>
